<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>大麦商城</title>
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 引入Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script  src="js/damai.js"></script>
<script src="js/top.js"></script>

<script>
// jQuery 加载函数
/* $(function(){
	$.get("hot.s", null, function(json){
		// 反引号
		let html = 
		`<li>
			<a target="_blank" href="###">
				<img src="???" style="display: block;">
			</a>
		</li>`;
		let list = JSON.parse(json);
		// 查找 热卖商品的容器元素
		let $hotUl = $("#hotProduct .tabContent").get(0);
		
		for( let p of list){
			// 替换 html 中的字段
			let pHtml = html.replace("###","detail.html?pid="+p.pid);
			pHtml = pHtml.replace("???",p.image);
			// 创建jQuery对象
			let $p = $(pHtml);
			// 追加元素必须使用 DOM对象
			$hotUl.append($p[0]);
		}
		
	});
	$.get("new.s", null, function(json){
		// 反引号
		let html = 
		`<li>
			<a target="_blank" href="###">
				<img src="???" style="display: block;">
			</a>
		</li>`;
		let list = JSON.parse(json);
		// 查找 热卖商品的容器元素
		let $hotUl = $("#newProduct .tabContent").get(0);
		
		for( let p of list){
			// 替换 html 中的字段
			let pHtml = html.replace("###","detail.html?pid="+p.pid);
			pHtml = pHtml.replace("???",p.image);
			// 创建jQuery对象
			let $p = $(pHtml);
			// 追加元素必须使用 DOM对象
			$hotUl.append($p[0]);
		}
	});
}); */
</script>
</head>
<body>

	<div class="container header">
		<div class="span5">
			<div class="logo">
				<a href="index.html"> <img
					src="image/r___________renleipic_01/logo.png" alt="依依不舍" />
				</a>
			</div>
		</div>
		<div class="span9">
			<div class="headerAd">
				<img src="image/header.jpg" width="320" height="50" alt="正品保障"
					title="正品保障" />
			</div>
		</div>
					
		<div class="span10 last">
			<!-- 在这里  -->
			<top></top>
			
			
			<div class="cart">
				<a href="cart.html">购物车</a>
			</div>
			<div class="phone">
				客服热线: <strong>13234390126</strong>
			</div>
		</div>

		<!-- 自定义Vue组件 必须被Vue对象管理 -->
		<category></category>


	</div>
	<script type="text/javascript">
		new  Vue({
			el : ".header",
		});
	</script>

	<div class="container index">


		<div class="span24">
			<div id="hotProduct" class="hotProduct clearfix">
				<div class="title">
					<strong>热门商品</strong>
					<!-- <a  target="_blank"></a> -->
				</div>
				<ul class="tab">
					<li class="current"><a href="./蔬菜分类.htm?tagIds=1"
						target="_blank"></a></li>
					<li><a target="_blank"></a></li>
					<li><a target="_blank"></a></li>
				</ul>
				<!-- 大概行数 157 ~ 199 -->
				<ul class="tabContent" style="display: block;">
					<li v-for="h in hots">
						<a target="_blank" :href=" 'detail.html?pid=' + h.pid"> 
						<img :src="h.image" style="display: block;">
					</a></li>
				</ul>
			</div>
		</div>
		<div class="span24">
			<div id="newProduct" class="newProduct clearfix">
				<div class="title">
					<strong>最新商品</strong> <a target="_blank"></a>
				</div>
				<ul class="tab">
					<li class="current"><a href="./蔬菜分类.htm?tagIds=2"
						target="_blank"></a></li>
					<li><a target="_blank"></a></li>
					<li><a target="_blank"></a></li>
				</ul>
				<ul class="tabContent" style="display: block;">
					<!--最新商品删除的地方-->
					<li v-for="n in news"><a target="_blank" :href=" 'detail.html?pid='+n.pid "> <img
							:src="n.image" style="display: block;">
					</a></li>
				</ul>
			</div>
		</div>
		<div class="span24">
			<div class="friendLink">
				<dl>
					<dd>新手指南</dd>
					<dd>
						<a target="_blank">支付方式</a> |
					</dd>
					<dd>
						<a target="_blank">配送方式</a> |
					</dd>
					<dd>
						<a target="_blank">售后服务</a> |
					</dd>
					<dd>
						<a target="_blank">购物帮助</a> |
					</dd>
					<dd>
						<a target="_blank">蔬菜卡</a> |
					</dd>
					<dd>
						<a target="_blank">礼品卡</a> |
					</dd>
					<dd>
						<a target="_blank">银联卡</a> |
					</dd>
					<dd>
						<a target="_blank">亿家卡</a> |
					</dd>

					<dd class="more">
						<a>更多</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		 var v1 = new Vue({
			el : ".index",
			data :　{
				hots:[],
				news:[]
			},
			created(){
				axios.get("hot.s").then(res => {
					this.hots=res.data;
				}),
				axios.get("new.s").then(res => {
					this.news=res.data;
				})
			}
		}); 
	</script>





	<div class="container footer">
		<div class="span24">
			<div class="footerAd">
				<img src="image/footer.jpg" width="950" height="52" alt="我们的优势"
					title="我们的优势">
			</div>
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li><a>关于我们</a> |</li>
				<li><a>联系我们</a> |</li>
				<li><a>招贤纳士</a> |</li>
				<li><a>法律声明</a> |</li>
				<li><a>友情链接</a> |</li>
				<li><a target="_blank">支付方式</a> |</li>
				<li><a target="_blank">配送方式</a> |</li>
				<li><a>服务声明</a> |</li>
				<li><a>广告声明</a></li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright © 2005-2013 大麦商城 版权所有</div>
		</div>
	</div>
</body>
</html>